In diesem Kapitel schauen wir uns an, wie man mit CSS formatieren kann. Sie werden feststellen, dass die möglichen Formatierungen sehr ähnlich sind zu einem Textverarbeitungsprogramm wie Word.

Wir beginnen mit der Schriftformatierung. Mit "font-family" kann man eine kommagetrennte Liste von Zeichensätzen angeben. Dies geschieht durch die Angabe einer konkreten Schrift, zum Beispiel Helvetica, "Times New Roman" oder einer Schriftfamilie wie serif, sans-serif oder monospace. Mehrere Angaben können gemacht werden, die zuerst passende wird gewählt. "font-style" ist der Schriftstil, entweder normal, kursiv oder schräggestellt. "font-size" gibt die Schriftgröße an und "color" die Textfarbe.

"font-weight" ist das sogenannte Schriftgewicht, von fein über normal und fett zu extra fett. "text-decoration" kann "none" sein oder unterstrichen, überstrichen, durchgestrichen oder blinkend.

Als horizontale Absatzformatierung können Sie die erste Zeile eines Textes einrücken oder mit negativen Werten sogar ausrücken. "text-align" beschreibt die linksbündige (left), zentrierte (center) oder rechtsbündige (right) Textausrichtung. Auch ein Blocksatz ist mit "justify" möglich.

Die vertikale Absatzformatierung besteht aus der vertikalen Textausrichtung "vertical-align" mit den möglichen Werten top (oben), middle (mittig), bottom (unten), sub (tiefgestellt) und super (hochgestellt); jeweils ohne die Schriftgröße zu reduzieren. Außerdem kann man den Zeilenumbruch steuern mit "pre" wie im HTML-Quelltext, "pre-wrap" mit einem automatischen Umbruch am Rand, "nowrap" (also kein automatischer Zeilenumbruch) und "normal" mit automatischem Zeilenumbruch.

Was kann man alles am Hintergrund formatieren? Die Hintergrundfarbe (background-color) und das Hintergrundbild (background-image). Wenn es ein Hintergrundbild gibt, dann kann man mit "background-repeat" angeben, was bei hohen Auflösungen passieren soll. Soll das Bild in X- und Y-Richtung wiederholt werden? Das "repeat" ist der Standardwert. "repeat-x" bedeutet ein Wiederholen nur in X-Richtung. "repeat-y" bedeutet ein Wiederholen nur in Y-Richtung. "no-repeat" bedeutet keine Wiederholung. "background-position" gibt die Position des Bildes an, wenn "no-repeat" gewählt wurde. Dann kann man als horizontale Ausrichtung "top", "bottom" oder "center" angeben sowie als vertikale Ausrichtung "left", "right" oder "center".

Kommen wir zur Listenformatierung. "list-style-type" definiert die Darstellung für geordnete Listen (ol). Die Nummerierung kann in arabischen Zahlen sein, in römischen Klein- oder Großbuchstaben oder in Klein- oder Großbuchstaben. "list-style-type" für ungeordnete Listen (ul) kann ein gefüllter oder hohler Kreis sein, ein Quadrat oder gar kein Zeichen.

Mit "list-style-image" können Sie eine beliebige Grafikdatei für das Aufzählungszeichen definieren. Und mit "list-style-position" können Sie die Einrückung der Aufzählungspunkte definieren. "inside" bedeutet nicht eingerückt und "outside" eingerückt; das ist der Standardwert.

Nun kommt die Tabellenformatierung. Mit "table-layout" gibt es die Bestimmung der Zellenbreite. "auto" bedeutet: Die Breite orientiert sich am Zelleninhalt. "fixed" bedeutet: Die Breite folgt dem width-Attribut. "empty-cells" definiert, ob es einen Rahmen um leere Zellen gibt (show) oder nicht (hide). Mit der Eigenschaft "border-collapse" und dem Wert "collapse" wird der Rahmen benachbarter Zellen getrennt. Standardwert ist hier "separate", wobei der Rahmen getrennt um jede Zelle gezeichnet wird.

Hier sehen wir den optischen Unterschied im Layout einer Tabelle zwischen "border-collapse: separate" und "border-collapse: collapse". Was finden Sie schöner?

Schauen wir uns einmal ein größeres Beispiel einer HTML-Tabellenformatierung an. Hier sehen Sie einen Tabellen-Header. Die erste Zeile hat fünf Spalten, wobei die erste Spalte leer ist. Spalte zwei, drei und fünf erstreckt sich über zwei Zeilen (rowspan="2"). Spalte vier mit dem Text "Internet Explorer" erstreckt sich über drei Spalten (colspan="3"). Die nächste Zeile besteht aus drei Spalten.

Der Body-Teil der HTML-Tabelle besteht aus einigen Zeilen und jeweils sechs Datenwerten mit Prozentangaben. Die Beschriftungen der Zeilen beginnen mit Juli und August und es folgen wohl noch weitere Zeilen.

Nun kommt die CSS-Formatierung der HTML-Tabelle. Zunächst die Formatierung der Tabelle selbst über "border-collapse" und "border-spacing", das den Abstand zwischen zwei Rahmen von Zellen definiert. Danach kommt die gemeinsame Formatierung der Table Header und Table Data Zellen. "border-radius" bewirkt dabei die Abrundung der Ecken von Zellen. Danach werden noch Farben der Table Head Zellen besonders formatiert. Aber nur die, die sich im "thead" befinden. Danach wird die Schrift und der Schatten der Zellen von Table Data Zellen formatiert. Abschließend wird über die Pseudoklasse der leeren Table Data Zellen definiert, dass dort kein Schatten vorhanden sein soll.

Und das ist das Ergebnis der CSS-Formatierung.

Weitere Tabellenformatierungen können Sie über diesen Self-HTML Link einsehen.

Kommen wir nun zu der Positionierung von Elementen. Dies geschieht über "position: static". Das ist der normale Fluss als Standardeinstellung. Abstandsangaben (top, bottom, left, right) werden dabei ignoriert. Bei "relative" wird die Position relativ zur Lage, die sich aus normalem Fluss ergibt, verändert. Mit dem Fluss ist beispielsweise gemeint, durch einen Fließtext zu scrollen. Die "absolute" Position bezieht sich auf den Rand des umgebenden Elements, wenn dieses selber positioniert wurde (mit "relative", "absolute" oder "fixed") oder andernfalls auf das Browserfenster. "fixed" ist eine absolut feste Position, die sich immer auf das Browserfenster bezieht. Das Element bleibt dann auch beim Scrollen stehen.

Hier sehen wir ein schwarzes Element, das bei top und left gleich zwanzig Pixel vom Browserfenster positioniert ist. Egal wie man scrollt, das Ding bleibt genau da stehen.

Sie haben schon gesehen, wie man die Position angibt, nämlich mit top (Abstand von oben), left (Abstand von links), right (Abstand von rechts) und bottom (Abstand von unten).

Interessant ist auch die Positionierung auf der Z-Achse. "z-index" legt die Reihenfolge bei der Überlappung von mehreren Elementen fest. Das ist relevant vor allem bei Positionierung über "absolute" und "fixed". Es wird als Ganzzahl angegeben. Je größer die Zahl, desto weiter vorne das Element, also z-index eins, z-index zwei und z-index drei.

Zum Schluss schauen wir uns noch ein Layout mit Floats an. Mit "float" kann man einen Block aus dem normalen Fluss herausnehmen. Mit "left" wird er links und mit "right" wird der Block rechts positioniert. Mit "none" wird der Block im normalen Textfluss eingebettet. "clear" legt die Positionierung nach Floats fest. "left" fährt unterhalb des letzten links ausgerückten Blocks fort, "right" fährt unterhalb des letzten rechts ausgerückten Blocks fort und "both" fährt unterhalb des letzten ausgerückten Blocks fort.

Hier sehen Sie ein Beispiel für ein Layout mit Floats unter Verwendung von div-Elementen. Es gibt eine Kopfzeile mit fett gedruckter Schrift, wobei man das b-Element für "bold" in HTML5 nicht mehr verwenden sollte. Der Hintergrund ist schwarz und der Vordergrund ist weiß. Die beiden folgenden div-Elemente haben einmal "float left" und einmal "float right". Diese beiden Elemente haben hellgrauen Hintergrund und nehmen jeweils fünfzehn Prozent der Breite ein. Danach kommt ein weiteres div-Element im regulären Fluss mit viel Inhalt "Lorem ipsum". Abschließend kommt ein div-Element mit "clear both", das sich dadurch unter den bisherigen Elementen ansiedelt. Der Hintergrund ist wieder schwarz und der Vordergrund ist weiß.

Und das ist das Ergebnis der vorherigen Folie. Die schwarze Kopf- und Fußzeile, die beiden hellgrauen Elemente links und rechts sowie der Inhaltsbereich in der Mitte. Dies könnte auch schon der erste Schritt für die Aufteilung einer Webseite sein.